<template>
  <div class="follow-record">
    <el-button @click="openDialog">跟进记录</el-button>
    <move-dialog
      :visible="visible"
      :before-close="closeDialog"
      width="480px"
      title="跟进记录"
      :close-on-click-modal="false"
      :customClass="enable ? '' : 'no-footer'"
    >
      <alert-msg content="跟进记录模版字段可在【动态表单】中进行设置">
        <template #icon>
          <i class="MC_iconfont MC_icon-xinxi-mian"></i>
        </template>
      </alert-msg>
      <follow-form
        v-if="enable"
        ref="customerFormRef"
        type="add"
        scenes="customerMgmt"
        :form="form"
        @onChangeTemStatus="changeStatus"
      >
      </follow-form>
      <div v-else class="disenable">
        <img :src="emptyImg" />
        <p class="text">跟进记录表单已被禁用</p>
      </div>
      <template v-if="enable" #footer>
        <el-button link @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </template>
    </move-dialog>
  </div>
</template>

<script lang="ts">
/**
 * 跟进记录按钮
 */
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
import moveDialog from '@common/components/move-dialog/index.vue'
import alertMsg from '@common/components/alert/index.vue'
import followForm from './dynamic-form.vue'
import { saveFollow } from '@app/customer/apis/pool'
import { ElMessage } from 'element-plus'
import { getParams } from '@app/customer/mixins/index'
import emptyImg from '@/common/assets/empty-img/service-record.svg'
export default defineComponent({
  name: 'FollowBtn',
  components: { moveDialog, alertMsg, followForm },
  props: {
    customerId: {
      type: String,
      default: ''
    }
  },
  emits: ['onUpdateDy'],
  setup(props, { emit }) {
    const state = reactive({
      visible: false,
      form: {},
      enable: true
    })

    const instance: any = getCurrentInstance()

    const openDialog = () => {
      state.form = {}
      state.visible = true
    }

    const closeDialog = () => {
      state.visible = false
    }

    const changeStatus = (val: boolean) => {
      state.enable = val
    }

    const submit = () => {
      instance?.refs.customerFormRef.isCheckForm().then((res: any) => {
        if (res.status) {
          const sendForm = {
            fields: getParams(res.form),
            category: 'follow',
            customerId: props.customerId
          }
          saveFollow(sendForm).then((res) => {
            if (res.success) {
              ElMessage.success('操作成功')
              state.visible = false
              emit('onUpdateDy')
            }
          })
        }
      })
    }

    return {
      changeStatus,
      ...toRefs(state),
      openDialog,
      closeDialog,
      submit,
      emptyImg
    }
  }
})
</script>
<style lang="stylus">
.no-footer
  .el-dialog__footer
    border-top none
</style>
<style lang="stylus" scoped>
.disenable
  text-align center
  color rgba(0, 0, 0, 0.6)
:deep(.el-date-editor)
  width calc(100% - 22px)
.el-button
  margin-left 20px
  height 30px !important
</style>
